<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sa-OAuth2-认证中心-登录页</title>
    <style type="text/css">
        html {height: 100%}
        body{
            height: 100%;display: flex;
            justify-content: center;
            align-items: center;
            background: url(/dm-auth-service/static/1.png) space;
            background-size: 100%;
            background-color: #000;
        }
        *{margin: 0px; padding: 0px;}
        .login-box{width: 400px;padding: 30px;background-color: #ffffff7d;}
        /* .login-box input{line-height: 25px; margin-bottom: 10px;}
        .login-box button{padding: 5px 15px; cursor: pointer; } */
        .item {height: 25px;line-height: 25px; margin-bottom: 10px;display: flex;}
        .item .txt {width: 80px;}
        .item input {width: 100%}
        .item select {width: 100%}
        .btnBox {height: 25px;line-height: 25px; margin-bottom: 10px;text-align: center;}
        .btnBox button {    
            padding: 7px 24px;
            color: white;
            background: #008FE0;
            border: 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="logForm" class="login-box">
    <!-- <h2>Sa-OAuth2-认证中心-登录页</h2> <br> -->
    <div class="item">
        <span class="txt">用户名：</span>
        <input id="yhm" name="name" />
    </div>
    <div class="item">
        <span class="txt">密码：</span>
        <input id="pwd" name="pwd" type="password"  />
    </div>
    <div class="item">
        <span class="txt">角色：</span>
        <select id="jues">
            <!-- <option value="option1">选项1</option>
            <option value="option2">选项2</option>
            <option value="option3">选项3</option> -->
        </select> 
    </div>
    <div class="item">
        <span class="txt">UKey</span>
        <input name="pwd" type="password" />
    </div>
    <div class="btnBox">
        <button  onclick="doLogin()">登录</button>
    </div>
    
    <span style="color: wheat;">（测试账号： admin 123456）</span>
</div>
 <script src="/dm-auth-service/static/jquery.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script src="/dm-auth-service/static/layer.js"></script>
<!--<script>window.jQuery || alert('当前页面CDN服务商已宕机，请将所有js包更换为本地依赖')</script>-->
<script type="text/javascript">

    $(document).ready(function(){
        $("#yhm").keyup( function() {
            let dom = $("#jues")
            dom.empty()
            // 这里可以写些验证代码
            $.get('/dm-auth-service/apis/v1/authRole/findByUsername',
                {"username":$(this).val()},
                function(data){
                    let arr=[]
                    let reData=data.data
                    if(reData){
                        for(let i in reData){
                            arr.push({
                                name: reData[i].name,
                                value: reData[i].id
                            })
                        }
                    }
                    getItem(arr)
                },
                "json"
            );
        });
        $('#logForm').keydown(function(e){
            if(e.keyCode==13){
                doLogin()
            }
        });
    })

    function getItem(arr) {
        let dom = $("#jues")
        for(let i=0;i<arr.length;i++) {
            option = document.createElement('option');
            option.label = arr[i].name
            option.value = arr[i].value
            // let option = `<option value="${arr[i].value}"></option>`
            dom.append(option)
        }
    }
    getItem({})
    // 登录方法
    function doLogin() {
        var name = $('#yhm').val()
        var pwd = $('#pwd').val()
        var Js = $("#jues option:selected").val()
        if (name == '') {
            alert('请输入登录用户名！')
            return
        }else if(pwd == '') {
            alert('请输入登录密码！')
            return
        }
        $.ajax({
            url: '/dm-auth-service/oauth2/doLogin',
            data: {
                name: $('[name=name]').val(),
                pwd: $('[name=pwd]').val(),
                role: $('#jues').val()
            },
            dataType: 'json',
            success: function(res) {
                if(res.status == 200) {
                    layer.msg('登录成功！');
                    setTimeout(function() {
                        location.reload(true);
                    }, 800);
                } else {
                    layer.alert(res.msg);
                }
            },
            error: function(e) {
                console.log(e);
            }
        });
    }
</script>
</body>
</html>
